﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "RolePermissionIndex";
    Layout = null;
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <<link href="~/libs/layui-v2.9.21/layui-v2.9.21/layui/css/layui.css" rel="stylesheet" />
    <link href="~/libs/layui-v2.5.6/layui/css/layui.mobile.css" rel="stylesheet" />
</head>
<body>
    @* 查询条件 *@
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-sm3">
            <input type="text" name="A" id="roleName" placeholder="角色" class="layui-input">
        </div>

        <button type="button" class="layui-btn layui-bg-blue" id="searchButton">查询</button>
        <button type="button" class="layui-btn" onclick="location.reload()">重置</button>
    </form>


    @* 显示数据表格 *@
    <table class="layui-hide" id="mainData" lay-filter="mainData" style="margin-top: 10px;margin-left: 20px"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="assignment">分配</a>
    </script>

    <div id="rptree" style="display: none;width:600px">
        <div id="Tree" ></div>
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" lay-on="getChecked">获取选中节点数据</button>
        </div>
    </div>

    <script src="~/libs/jquery/jquery.js"></script>
    @*<script src="~/Scripts/layui-v2.5.6/layui/lay/modules/leftmenu.js"></script>*@
    <script src="~/libs/layui-v2.9.21/layui-v2.9.21/layui/layui.js"></script>
    <script>
        //全局变量
        var VendorInfo={};
        var index={};
        var list = [];
        var rowCount = 0;
        var pageCount = 0;
        var pageIndex = 1;
        var pageSize = 10;
        var tableStatusdata=[];

        layui.use('table',function () {
        var table = layui.table;
        var tree = layui.tree;
        var layer = layui.layer;
        var util = layui.util;
        var rolepermissiontree=[];
        var Id="";

            function showData(){
                table.render({
                    elem: '#mainData',
                    url: '/Role/Display',
                    page: true, // 开启分页
                    limit: 10, // 每页默认显示的条数
                    limits: [10, 20, 30], // 每页条数的选择项
                    cols: [
                        [
                            { field: 'roleName', title: '角色' },
                            { field: 'roleState',  title: '是否启用',templet: function (d) {
                                return d.roleState===1 ? '是' : '否';
                            }
                            },
                           { title: '操作', fixed: 'right', width: 300, align: 'center', toolbar: '#barDemo' }
                        ]
                    ],
                    where: {
                        roleName: $("#roleName").val(), //获取输入框的单位代码
                        page:1,
                        limit:10
                    },
                    parseData: function (res) {
                    console.log(res);
                        return {
                            code: res.code,
                            count: res.data.currentPage,
                            data: res.data.queryable
                        };
                    },
                })
            }

            showData()

            //查询
            $("#searchButton").on("click", function() {
                console.log("查询");
                showData();
            });

             //分配
            table.on('tool(mainData)', function(obj) {
                var data = obj.data;//获取当前行数据
                Id=data.id;
                if (obj.event === 'assignment') {
                    $.ajax({
                        url: '/RolePermission/GetTree',
                        type: 'get',
                        data: {
                            id: data.id
                        },
                        success: function (res) {
                            console.log(res)
                            rolepermissiontree=res;
                            //打开弹出层
                            index=layer.open({
                                type: 1,
                                shade: false, // 不显示遮罩
                                title:['角色分配权限', 'text-align:center;font-size:25px'],
                                offset: '10px',
                                content: $('#rptree'), // 捕获的元素
                                area: ['620px', '800px'], //宽高
                                end: function(){
                                    // layer.msg('关闭后的回调', {icon:6});
                                }
                            });
                            tree.render({
                                elem: '#Tree',
                                data: rolepermissiontree,
                                showCheckbox: true,  // 是否显示复选框
                                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                                id: 'id',
                                isJump: true, // 是否允许点击节点时弹出新窗口跳转
                                click: function(obj){
                                    
                                }
                            });
                        }
                    });
                }
            })
            // 按钮事件
            util.event('lay-on', {
                getChecked: function(othis){
                    var checkedData = tree.getChecked('id'); // 获取选中节点的数据
                    //layer.alert(JSON.stringify(checkedData), {shade:0});
                    console.log(checkedData);
                    $.ajax({
                        url: "/RolePermission/Insert",
                        type: "post",
                        async: false,
                        datatype: "json",
                        data:{id:Id,rolePermissionsTreeDtos:checkedData},
                        success: function (res) {
                            console.log(res);
                            if(res==1){
                                layer.msg('分配成功', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                                showData();
                                layer.close(index);
                            }
                            else{
                                layer.msg('分配失败', {
                                    time: 1000, // 1s 后自动关闭
                                    offset: '16px'
                                });
                            }
                        }
                    })
                },
            });
        });
    </script>
</body>
</html>

